<template>
  <header>
    <div class="l-content">
      <el-button  @click="handleMenu()" plain icon="el-icon-menu" size="mini"></el-button>
      <h3 style="color:white ;">首页</h3>
    </div>
    <h3 style="color:white ;" class="r-content">总资金: {{AllUmoney}} 元</h3>
    <div class="r-content">
        <el-dropdown trigger="click" size="mini">
          <span>
            <img class="user" :src="userImg"/>
          </span>
        <el-dropdown-menu slot="dropdown">

            <el-dropdown-item icon="el-icon-user">欢迎{{user.aname}}</el-dropdown-item>
            <span @click="a()"><el-dropdown-item icon="el-icon-s-custom">修改信息</el-dropdown-item></span>

            <span @click="loginout()"><el-dropdown-item icon="el-icon-s-fold" >退出</el-dropdown-item></span>
        </el-dropdown-menu>
        </el-dropdown>
    </div>
    <!-- 修改 -->
    <el-dialog :visible.sync="dialogFormVisible4Edit" title="修改信息">
      <el-form :model="admin">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="admin.aname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="admin.apwd" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="modifyAdmin()">确 定</el-button>
      </div>
    </el-dialog>
  </header>
</template>

<script>
const axios = require("axios");
axios.defaults.baseURL = '/api/'
export default {
  name: "CommonHeader",
  data() {
    return {
       dialogFormVisible4Edit:false,
      userImg:require('../assets/images/user.jpg'),

       user:JSON.parse(sessionStorage.getItem("admin")),
       admin:{
         aname:'',
         apwd:''
       },
       id:'',
       formLabelWidth: '120px',
       AllUmoney: 0
    }
  },
  methods:{
    
    getAllAmoney(){
      axios({
        method: 'GET',
        url: '/amoney/getAllMoneySum'
      }).then(res => {
        this.AllUmoney = res.data.data;
      })
    },
    handleMenu(){
      this.$store.commit('collapseMenu')
    },
    loginout(){
      sessionStorage.removeItem("admin"),
       localStorage.removeItem('userName');
      this.$router.push('/')
    },
    findId(){
      axios({
        method:'GET',
        url:'/admin/findByName/'+this.user.aname
      }).then(res=>{
        this.id=res.data
      })
    },
    a(){
      this.find();
      this.dialogFormVisible4Edit=true
    },cancel: function () {
      this.$message.info("当前操作已取消")
      this.dialogFormVisible4Edit=false
    },
    find(){
      this.findId()
      axios({
        method:'GET',
        url: '/admin/getAdminById/'+this.id,
      }).then(res=>{
        // console.log(res.data.data);
        if(res.data.status!=0){
            this.admin=res.data.data
        }
        
      })
    },
    login(){
      
    },
    modifyAdmin: function(){
      this.find();
      axios({
        method:'PUT',
        url:'/admin/updateAdmin',
        data: this.admin
      }).then(res=>{
        this.dialogFormVisible4Edit=false,
        this.$message.success("修改成功,请重新登录");
        this.$router.push('/')
      })
    },
  },
  created() {
    this.find();
    this.getAllAmoney();
  }
}
</script>

<style lang="less" scoped>
header{
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}
.l-content{
  display: flex;
  align-items: center;
  .el-button{
    margin: 20px;
  }
}
.r-content{
  .user{
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>
